import React, { useMemo } from "react";
import { Row, Col } from "antd";
import "./index.less";
import TextEllipsis from "../TextEllipsis";
export const ReadonlyFormWarpper = (props) => {
  const { readonlyFormSetting = {}, readonlyForm = {} } = props;

  const formObj = useMemo(() => {
    if (Object.keys(readonlyForm).length) {
      return readonlyForm;
    } else {
      return {};
    }
  }, [readonlyForm]);

  return (
    <div className="readonlyFormWarpper">
      <Row gutter={24} style={{ width: "100%" }}>
        {readonlyFormSetting.columns?.map((item, index) => (
          <Col
            className="form-label-col"
            key={index}
            span={item.row ? 24 : readonlyFormSetting.span || 12}
            xs={24}
            sm={24}
            md={item.row ? 24 : readonlyFormSetting.span || 12}
            lg={item.row ? 24 : readonlyFormSetting.span || 12}
            xl={item.row ? 24 : readonlyFormSetting.span || 12}
            xxl={item.row ? 24 : readonlyFormSetting.span || 12}
            style={{
              paddingLeft: readonlyFormSetting.space ? "0px" : "12px",
              paddingRight: readonlyFormSetting.space ? "0px" : "12px",
              height: readonlyFormSetting.columns.some(
                (it) => it.slot && it.component
              )
                ? "50px"
                : "",
            }}
          >
            <div
              className={`form-label ${
                readonlyFormSetting.border ? "form-border" : ""
              }`}
              style={{
                width: readonlyFormSetting.labelWidth
                  ? `${readonlyFormSetting.labelWidth}px`
                  : "80px",
                display: "flex",
                justifyContent: readonlyFormSetting.labelAlign || "left",
                alignItems: "center",
                color: readonlyFormSetting.labelColor
                  ? readonlyFormSetting.labelColor
                  : "rgba(0, 0, 0, 0.45)",
                background: readonlyFormSetting.labelBackground
                  ? "rgba(0, 0, 0, 0.02)"
                  : "none",
              }}
            >
              {item.label}
            </div>
            <div
              className={`form-label ${
                readonlyFormSetting.border ? "form-border" : ""
              }`}
              style={{
                width: readonlyFormSetting.labelWidth
                  ? `calc(100% - ${readonlyFormSetting.labelWidth}px + 2px)`
                  : "calc(100% - 78px)",
                display: "flex",
                justifyContent: item.align || "left",
                alignItems: "center",
              }}
            >
              {!item.slot ? (
                <TextEllipsis
                  text={formObj[item.name]}
                  ellipsis={item.ellipsis}
                  lineClamp={item.lineClamp}
                />
              ) : (
                item.component
              )}
            </div>
          </Col>
        ))}
      </Row>
    </div>
  );
};

export default ReadonlyFormWarpper;
